<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$config.web_name}</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    a {
        text-decoration: none;
    }
    
    body {
        background: url(/static/img/login-bg.png) repeat-y center center;
        background-size: 100% auto;
        font-family: "微软雅黑";
        width: 100%;
        height: 100vh;
    }
    
    .login {
        width: 492px;
        position: absolute;
        top: 43%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .login h2 {
        color: #fff;
        text-align: center;
        font-size: 45px;
    }
    
    .login .login-c {
        background: rgba(255, 255, 255, .2);
        margin-top: 73px;
        padding: 30px 86px 48px 86px;
        position: relative;
        border-radius: 8px;
    }
    
    .login .login-c .value {
        /* text-align: center; */
        margin-top: 19px;
    }
    
    .login .login-c .value>div {
        display: inline-block;
        position: relative;
    }
    
    .login .login-c .value input {
        width: 321px;
        height: 39px;
        line-height: 39px;
        background-color: #fff;
        border-radius: 5px;
        border: none;
        outline: none;
        padding-left: 60px;
    }
    
    .login .login-c .value .icon {
        position: absolute;
        top: 50%;
        left: 8px;
        transform: translateY(-50%);
        color: #ababab;
    }
    
    .login .login-c .value .icon img {
        vertical-align: bottom;
    }
    
    .login .login-c .value.yanzheng input {
        width: 151px;
        vertical-align: middle;
        padding-left: 8px;
    }
    
    .login .login-c .value.yanzheng img {
        vertical-align: middle;
        height: 39px;
        margin-left: 43px;
        cursor: pointer;
        width: 121px;
    }
    
    .login .login-c .caozuo {
        margin-top: 16px;
        display: flex;
    }
    
    .login .login-c .caozuo .jizhu,
    .login .login-c .caozuo .wangji {
        flex: 1;
    }
    
    .login .login-c .caozuo .jizhu {
        color: #fff;
        font-size: 14px;
        line-height: 21px;
    }
    
    .login .login-c .caozuo .jizhu input {
        vertical-align: middle;
        cursor: pointer;
    }
    
    .login .login-c .caozuo .wangji {
        text-align: right;
        line-height: 21px;
    }
    
    .login .login-c .caozuo .wangji a {
        color: #fff;
        font-size: 14px;
    }
    
    .login .login-c .btn {
        margin-top: 12px;
    }
    
    .login .login-c .btn button {
        width: 100%;
        height: 39px;
        line-height: 39px;
        color: #fff;
        background-color: #009687;
        border-radius: 8px;
        border: none;
        cursor: pointer;
    }
    
    .login .login-c .zhichi {
        position: absolute;
        bottom: 13px;
        right: 19px;
        text-align: right;
        font-size: 12px;
    }
    
    .login .zhichi a {
        color: #fdfefe;
    }
    
    #J_dotLine {
        width: 100%;
        height: 100vh;
        /* background: rgba(255, 255, 255, .2); */
    }
</style>

<body>
    <canvas id="J_dotLine"></canvas>
    <div class="login" id="app">
        <h2>{$config.web_name}</h2>
        <form id="loginForm">
        <div class="login-c">
            <div class="value">
                <div>
                    <input required="required" name="user_name" type="text" placeholder="请输入账号">
                    <div class="icon">
                        <img src="/static/img/login.png" alt=""> 丨
                    </div>
                </div>
            </div>
            <div class="value">
                <div>
                    <input required="required" type="password" name="pass_word" placeholder="请输入账号">
                    <div class="icon">
                        <img src="/static/img/password.png" alt=""> 丨
                    </div>
                </div>
            </div>
            <div class="value yanzheng">
                <input required="required" name="code" type="text" placeholder="请输入验证码">
                <img id="LAY-user-get-vercode" src="{:captcha_src()}" alt="" onclick="this.src='{:captcha_src()}?'+Math.random();">
            </div>

            <div class="caozuo" style="display: none">
                <div class="jizhu">
                    <label style="cursor: pointer"><input type="checkbox" name="remember" value="1"> 记住密码</label>
                </div>
                <div class="wangji">
                    <a href="javascript:;">忘记密码</a>
                </div>
            </div>
            <div class="btn" style="margin-top: 20px">
                <button type="button" id="submit" @click="submit">登录</button>
            </div>

            <div class="zhichi">
               <a href="http://www.htidc.net">海腾网络提供技术支持</a>
            </div>
        </div>
        </form>
    </div>
    <link rel="stylesheet" href="/static/elementUi/elementui@2.15.6.index.css" />
    <!-- 导入 Vue 3 -->
    <script src="/static/elementUi/vue@2.6.14.js"></script>
    <!-- 导入组件库 -->
    <script src="/static/elementUi/element.2.15.6.index.js"></script>
    <script src="/static/global/js/jquery.min.js"></script>
    <script src="/static/elementUi/component/mixin.js"></script>

    <script>
        (function(window) {
            function Dotline(option) {
                this.opt = this.extend({
                    dom: 'J_dotLine', //画布id
                    cw: 1000, //画布宽
                    ch: 500, //画布高
                    ds: 100, //点的个数
                    r: 0.5, //圆点半径
                    cl: '#000', //颜色
                    dis: 100 //触发连线的距离
                }, option);
                this.c = document.getElementById(this.opt.dom); //canvas元素id
                this.ctx = this.c.getContext('2d');
                this.c.width = this.opt.cw; //canvas宽
                this.c.height = this.opt.ch; //canvas高
                this.dotSum = this.opt.ds; //点的数量
                this.radius = this.opt.r; //圆点的半径
                this.disMax = this.opt.dis * this.opt.dis; //点与点触发连线的间距
                this.color = this.color2rgb(this.opt.cl); //设置粒子线颜色
                this.dots = [];
                //requestAnimationFrame控制canvas动画
                var RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
                var _self = this;
                //增加鼠标效果
                var mousedot = {
                    x: null,
                    y: null,
                    label: 'mouse'
                };
                this.c.onmousemove = function(e) {
                    var e = e || window.event;
                    mousedot.x = e.clientX - _self.c.offsetLeft;
                    mousedot.y = e.clientY - _self.c.offsetTop;
                };
                this.c.onmouseout = function(e) {
                        mousedot.x = null;
                        mousedot.y = null;
                    }
                    //控制动画
                this.animate = function() {
                    _self.ctx.clearRect(0, 0, _self.c.width, _self.c.height);
                    _self.drawLine([mousedot].concat(_self.dots));
                    RAF(_self.animate);
                };
            }
            //合并配置项，es6直接使用obj.assign();
            Dotline.prototype.extend = function(o, e) {
                for (var key in e) {
                    if (e[key]) {
                        o[key] = e[key]
                    }
                }
                return o;
            };
            //设置线条颜色(参考{抄袭}张鑫旭大大，http://www.zhangxinxu.com/wordpress/2010/03/javascript-hex-rgb-hsl-color-convert/)
            Dotline.prototype.color2rgb = function(colorStr) {
                    var red = null,
                        green = null,
                        blue = null;
                    var cstr = colorStr.toLowerCase(); //变小写
                    var cReg = /^#[0-9a-fA-F]{3,6}$/; //确定是16进制颜色码
                    if (cstr && cReg.test(cstr)) {
                        if (cstr.length == 4) {
                            var cstrnew = '#';
                            for (var i = 1; i < 4; i++) {
                                cstrnew += cstr.slice(i, i + 1).concat(cstr.slice(i, i + 1));
                            }
                            cstr = cstrnew;
                        }
                        red = parseInt('0x' + cstr.slice(1, 3));
                        green = parseInt('0x' + cstr.slice(3, 5));
                        blue = parseInt('0x' + cstr.slice(5, 7));
                    }
                    return red + ',' + green + ',' + blue;
                }
                //画点
            Dotline.prototype.addDots = function() {
                var dot;
                for (var i = 0; i < this.dotSum; i++) { //参数
                    dot = {
                        x: Math.floor(Math.random() * this.c.width) - this.radius,
                        y: Math.floor(Math.random() * this.c.height) - this.radius,
                        ax: (Math.random() * 2 - 1) / 1.5,
                        ay: (Math.random() * 2 - 1) / 1.5
                    }
                    this.dots.push(dot);
                }
            };
            //点运动
            Dotline.prototype.move = function(dot) {
                dot.x += dot.ax;
                dot.y += dot.ay;
                //点碰到边缘返回
                dot.ax *= (dot.x > (this.c.width - this.radius) || dot.x < this.radius) ? -1 : 1;
                dot.ay *= (dot.y > (this.c.height - this.radius) || dot.y < this.radius) ? -1 : 1;
                //绘制点
                this.ctx.beginPath();
                this.ctx.arc(dot.x, dot.y, this.radius, 0, Math.PI * 2, true);
                this.ctx.stroke();
            };
            //点之间画线
            Dotline.prototype.drawLine = function(dots) {
                var nowDot;
                var _that = this;
                //自己的思路：遍历两次所有的点，比较点之间的距离，函数的触发放在animate里
                this.dots.forEach(function(dot) {

                    _that.move(dot);
                    for (var j = 0; j < dots.length; j++) {
                        nowDot = dots[j];
                        if (nowDot === dot || nowDot.x === null || nowDot.y === null) continue; //continue跳出当前循环开始新的循环
                        var dx = dot.x - nowDot.x, //别的点坐标减当前点坐标
                            dy = dot.y - nowDot.y;
                        var dc = dx * dx + dy * dy;
                        if (Math.sqrt(dc) > Math.sqrt(_that.disMax)) continue;
                        // 如果是鼠标，则让粒子向鼠标的位置移动
                        if (nowDot.label && Math.sqrt(dc) > Math.sqrt(_that.disMax) / 2) {
                            dot.x -= dx * 0.02;
                            dot.y -= dy * 0.02;
                        }
                        var ratio;
                        ratio = (_that.disMax - dc) / _that.disMax;
                        _that.ctx.beginPath();
                        _that.ctx.lineWidth = ratio / 2;
                        _that.ctx.strokeStyle = 'rgba(' + _that.color + ',' + parseFloat(ratio + 0.2).toFixed(1) + ')';
                        _that.ctx.moveTo(dot.x, dot.y);
                        _that.ctx.lineTo(nowDot.x, nowDot.y);
                        _that.ctx.stroke(); //不描边看不出效果
                        //dots.splice(dots.indexOf(dot), 1);
                    }
                });
            };
            //开始动画
            Dotline.prototype.start = function() {
                var _that = this;
                this.addDots();
                setTimeout(function() {
                    _that.animate();
                }, 100);
            }
            window.Dotline = Dotline;
        }(window));
        //调用
        window.onload = function() {
            var dotline = new Dotline({
                dom: 'J_dotLine', //画布id
                cw: 1000, //画布宽
                ch: 500, //画布高
                ds: 50, //点的个数
                r: 0.5, //圆点半径
                // cl: '#12FC41', //粒子线颜色
                cl:'#303030',
                dis: 100 //触发连线的距离
            }).start();
        }
    </script>
    <script>
        // 回车提交
        $("body").keydown(function (e) {
            if (e.keyCode == "13") {
                $("#submit").trigger('click');
            }
        })
    </script>

    <script>
        new Vue({
            el:"#app",
            data:function (){
                return {

                }
            },
            methods:{
                submit:function() {
                    const load = this.showLoad();
                    var that = this;
                    $.ajax({
                        url: '{:url("Login/index")}'
                        , type: 'POST'
                        , dataType: 'JSON'
                        , data: $("#loginForm").serialize()
                        , success: function (res) {
                            if (res.code == 1) {
                                that.$message({
                                    message: '登录成功',
                                    type:'success'
                                })
                                $.ajax({
                                    url:'/admin/admin/getUserAuth',
                                    dataType:'json',
                                    async:false,
                                    success:function (res) {
                                        if (res.code === 1) {
                                            sessionStorage.setItem('ht_admin_rule',res.data.auth)
                                        }
                                    }
                                })
                                setTimeout(function (){
                                    location.href = "{:url('Index/index')}"
                                },1000)

                            } else {
                                that.$message.error(res.msg)
                                $("#LAY-user-get-vercode").attr('src', '{:captcha_src()}?' + Math.random())
                            }
                        }
                        , complete: function () {
                            load.close();
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>